<template>
	<div class="special-fresh">
		<!--吸顶-->
		<van-sticky>
			<!--筛选栏-->
			<div class="filter-bar">
				<div class="sort-list">
					<sort
						v-for="(item, index) in sort"
						:key="index"
						:active="item.active"
						:index="index"
						:order="item.order"
						:title="item.title"
						@changeSort="changeSort"
					></sort>
				</div>
				<div class="check-list">
					<van-checkbox v-model="isChecked" shape="square" @change="refresh">优惠券</van-checkbox>
				</div>
			</div>
		</van-sticky>

		<!--商品列表-->
		<van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
			<van-list
				v-model="loading"
				:finished="finished"
				:error.sync="error"
				@load="loadMore"
				finished-text="没有更多了"
				loading-text="拼命加载中"
			>
				<!--商品列表-->
				<div class="goods-list">
					<div class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
						<div class="img-box">
							<img v-lazy="item.pic" alt="" />
						</div>
						<div class="goods-content">
							<h2 class="goods-name">{{ item.title }}</h2>
							<div class="goods-price">
								<p class="deal">
									¥<span>{{ item.endPrice }}</span>
								</p>
								<p class="original">¥{{ item.price }}</p>
							</div>
							<div class="sale">销量{{ item.sale | formatMyriadNum }}</div>
							<div class="discount">
								<div class="coupon">
									<div class="circle-left"></div>
									<div class="circle-right"></div>
									{{ item.couponMoney }}元券
								</div>
								<div class="subsidy">
									<div class="circle-left"></div>
									<div class="circle-right"></div>
									补贴¥{{ item.allowanceMoney }}
								</div>
							</div>
						</div>
					</div>
				</div>

				<!--骨架屏-->
				<div class="skeleton-list">
					<van-skeleton
						v-for="number in 4"
						:key="'number' + number"
						avatar
						avatar-size="140"
						avatar-shape="square"
						row="4"
						:row-width="['100%', '65%', '40%', '80%']"
						:loading="loading"
					></van-skeleton>
				</div>

				<div slot="error">
					<empty emptyText="暂无商品" offsetTop="150"></empty>
				</div>
			</van-list>
		</van-pull-refresh>
	</div>
</template>

<script>
import moment from 'moment';
import { Checkbox, PullRefresh, List, Skeleton, Sticky } from 'vant';
import { Sort, Empty } from '../../../components';
export default {
	name: 'special-fresh',
	components: {
		Sort,
		Empty,
		'van-checkbox': Checkbox,
		'van-pull-refresh': PullRefresh,
		'van-list': List,
		'van-skeleton': Skeleton,
		'van-sticky': Sticky
	},
	data() {
		return {
			isRefresh: false, // 控制是否刷新
			loading: false, // 控制loading显示
			finished: false, // 控制是否加载更多商品
			error: false, // 控制是否为空数据
			sort: [
				{
					title: '综合',
					active: true,
					order: 'desc'
				},
				{
					title: '销量',
					active: false,
					order: ''
				},
				{
					title: '价格',
					active: false,
					order: ''
				}
			],
			isChecked: true,
			params: {
				page: 1,
				size: 20,
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59'),
				order: '',
				sort: 'desc',
				hasCoupon: 1
			},
			goodsList: []
		};
	},
	methods: {
		refresh() {
			this.error = false;
			this.goodsList = [];
			this.loading = true;
			this.finished = false;
			this.params.page = 1;
			this.loadMore();
		},
		changeSort(index, order) {
			this.sort.forEach(item => {
				item.active = false;
				item.order = '';
			});
			this.sort[index].order = order;
			this.sort[index].active = true;
			this.params.sort = order;

			switch (index) {
				case 0:
					this.params.order = 'ysqLevel';
					break;
				case 1:
					this.params.order = 'sale';
					break;
				case 2:
					this.params.order = 'endPrice';
					break;
				default:
					this.params.order = '';
			}
			if (!order) {
				this.params.order = '';
			}

			this.goodsList = [];
			this.loading = true;
			this.finished = false;
			this.params.page = 1;
			this.loadMore();
		},
		// 下拉刷新
		onRefresh() {
			this.error = false;
			this.goodsList = [];
			this.loading = true;
			this.finished = false;
			this.params.page = 1;
			this.loadMore('refresh');
		},
		// 追加数据
		loadMore(operate) {
			this.params.hasCoupon = this.isChecked ? 1 : 0;

			this.$service.shopping.goods.page(this.params).then(res => {
				this.goodsList = this.goodsList.concat(res.list);
				// 加载状态结束
				this.loading = false;
				this.params.page += 1;

				// 刷新列表
				if (operate === 'refresh') {
					this.$toast('刷新成功');
					this.isRefresh = false;
				}

				// 数据全部加载完成
				if (this.goodsList.length === 0) {
					this.params.page = 1;
					this.error = true;
				} else if (this.goodsList.length >= res.pagination.total) {
					this.finished = true;
				}
			});
		},
		// 跳转至商品详情
		toDetail(item) {
			this.$router.push({
				path: '/goods-detail',
				query: {
					gid: item.gid
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.special-fresh {
	.filter-bar {
		padding: 20px 0;
		background: $color-white;
		display: flex;
		.sort-list {
			display: flex;
			width: 74%;
			border-right: 2px solid #c8c8c8;
		}
		.check-list {
			width: 36%;
			@include flexBox(center);
			padding-right: 10px;
			/deep/.van-checkbox {
				@include flexBox(null, null, row-reverse);
				.van-checkbox__icon {
					height: 32px;
					.van-icon {
						width: 32px;
						height: 32px;
						border-radius: 4px;
						font-size: 28px;
						@include flexBox(center, center);
					}
				}
				.van-checkbox__icon--checked {
					.van-icon {
						background: $main-color;
						border-color: $main-color;
					}
				}
				.van-checkbox__label {
					font-size: 26px;
					color: #727272;
					margin-right: 10px;
				}
			}
		}
	}
	.van-list {
		min-height: 850px;
		.goods-list {
			@include flexBox(null, null, null, wrap);
			padding: 20px 20px 10px;
			.goods-item {
				width: 345px;
				height: 568px;
				margin-right: 20px;
				margin-bottom: 20px;
				border-radius: 8px;
				overflow: hidden;
				background: $color-white;
				box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
				&:nth-child(2n) {
					margin-right: 0;
				}
				.img-box {
					width: 345px;
					height: 345px;
					img {
						max-width: 100%;
						max-height: 100%;
					}
				}
				.goods-content {
					padding: 12px;
					height: 220px;
					@include flexBox(space-between, null, column);
					.goods-name {
						font-size: 26px;
						color: #3a3a3a;
						font-weight: 400;
						line-height: 34px;
						@include ellipsis(2);
					}
					.goods-price {
						color: $text-grey-default;
						font-size: 20px;
						margin-top: 10px;
						@include flexBox(null, center);
						.deal {
							color: $main-color;
							font-weight: 600;
							font-size: 26px;
							margin-right: 10px;
							span {
								font-size: 32px;
							}
						}
						.original {
							text-decoration: line-through;
						}
					}
					.sale {
						color: $text-grey;
						font-size: 24px;
					}
					.discount {
						height: 28px;
						margin-top: 10px;
						display: flex;
						.coupon {
							line-height: 28px;
							padding: 0 18px;
							background: $main-color;
							border-radius: 4px;
							display: inline;
							font-size: 20px;
							color: $color-white;
							position: relative;
							margin-right: 20px;
						}
						.subsidy {
							line-height: 28px;
							padding: 0 18px;
							background: #ffeed1;
							border-radius: 4px;
							display: inline;
							font-size: 20px;
							color: #925114;
							position: relative;
						}
						.circle-left {
							width: 12px;
							height: 12px;
							background: #fff;
							position: absolute;
							border-radius: 50%;
							top: 50%;
							margin-top: -6px;
							left: -6px;
						}
						.circle-right {
							width: 12px;
							height: 12px;
							background: #fff;
							position: absolute;
							border-radius: 50%;
							top: 50%;
							margin-top: -6px;
							right: -6px;
						}
					}
				}
			}
		}
		.skeleton-list {
			width: 710px;
			margin: 0 auto;
			@include flexBox(flex-start, null, null, wrap);
			.van-skeleton {
				width: 48%;
				margin-right: 4%;
				background: $color-white;
				margin-bottom: 30px;
				padding: 20px;
				border-radius: 8px;
				box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
				@include flexBox(flex-start, null, column);
				.van-skeleton__avatar {
					width: 100% !important;
					height: 0 !important;
					padding-bottom: 100%;
					border-radius: 16px;
				}
				.van-skeleton__row {
					border-radius: 8px;
				}
				&:nth-child(2n) {
					margin-right: 0;
				}
			}
		}
	}
}
</style>
